<style lang="less" scoped>
@primary-color:#FE9333;//橘黄色默认颜色
@black-color:#424242;//灰色背景颜色
@black2-color:#424242;//主灰色背景颜色
@border-color:#383838;//边框背景颜色
@write-color:#fff;//白色默认颜色
@font-color:#686E71;//正常字体颜色
@txtbg-color:#F6FAF9;//输入框背景色
	.previeWrap{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        .phone{
            width: 530px;
            height: 667px;
            position: relative;
            .left{
                // margin-top: 42px;
                width: 40px;
                // float: left;
                position: absolute;
                top:130px;
                left: 0;
                div{
                    font-size: 14px;
                    color: #686E71;
                    line-height: 22px;
                    background-color: #fff;
                    padding: 14px;
                    cursor: pointer;
                }
                .on{
                    background: #F16473;
                    color:#fff;
                }
            }
            .middle{
                float: left;
                width: 432px;
                height: 780px;
                background:url('../images/release_phonecopy.png') no-repeat;
                background-size: 100% 100%;
                transform: scale(0.8);
                position: relative;
                top:-50px;
                .middlePhone{
                    position: absolute;
                    top: 121px;
                    left: 26.5px;
                    width: 397px;
                    height: 608px;
                    overflow-x: hidden;
                    overflow-y: auto;
                }
            }
            .close{
                position: absolute;
                top:53px;
                right: 104px;
                width: 22px;
                height: 22px;
                 background:url('../images/closePhoto.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
            .musicBtn{
                position: absolute;
                top:145px;
                right: 181px;
                width: 36px;
                height: 36px;
                background: url('../images/musicBtn.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
            .musicBtnPlay{
                animation:mymove 1.5s infinite linear;
            }
            @keyframes mymove{
                from {transform: rotate(0deg);}
                to {transform: rotate(360deg);}
            }
            .popup{
                position: absolute;
                top:292px;
                left: 135px;
                background: #FFFFFF;
                box-shadow: 0 0 4px 0 rgba(0,0,0,0.23);
                border-radius: 4px;
                width: 154px;
                height: 40px;
                font-size: 14px;
                color: #686E71;
                line-height: 44px;
                img{
                    width: 30px;
                    height: 24px;
                    vertical-align: sub;
                    margin:  0 10px 0 16px;
                }
            }
        }
    }
    
</style>
<template>
	<div class="previeWrap">
		<div class="phone">
            <!-- 左侧穴位切换 -->
            <div class="left">
                <div :class='{on:index==dscheckactive}' v-for="(item,index) in doubleCemeteryList" @click.stop="checkdsx(item,index,true)">{{item.userName}}</div>
            </div>
            <!-- 手机 -->
            <div class="middle">
                <div class="middlePhone" v-if="phoneShow" ref="middlePhoneRef" @wheel="scrollBarWheel">  
                    <div v-for="(item,index) in headerstyle">
                        <div :style="item.headerStyle" v-if="item.type==1">
                            <!--头像-->
                            <div :style="item.moduleImageDivStyle"><img :src="item.headPictureSource?imgurl+item.headPictureSource:staticimg+'/images/blank5.png'" style="width: 100%;height: 100%;"/></div>
                            <!--姓名-->
                            <div :style="item.nameStyle" ref="nameStyle">{{item.userName}}</div>
                            <!--出生日期-->
                            <div :style="item.introductionDayStyle" ref="introductionStyle">{{birthdayTime(item.cemeteryIntroduction.birthDay)+'-'+ birthdayTime(item.cemeteryIntroduction.deadDay)}}</div>
                            <!--个人简介-->
                            <div :style="item.introductionStyle" ref="introductionDayStyle">{{item.introduction}}</div>			
                            <v-edittext :textflag="item.templateModuleContent"></v-edittext>
                            <img  :src="imgurl+item1.picSourcePath" v-for="(item1,index) in item.templateModulePicDTO" ref="picstyle" :style="item1.picStyle">
                            <img  :src="imgurl+item1.videoPicSourcePath" v-for="(item1,index) in item.templateModuleVideoDTO" ref="spstyle" :style="item1.videoStyle">
                        </div>
                        <!--墓志铭-->
                        <div :style="item.headerStyle" v-if="item.type==2">
                            <!--标题-->
                            <div  :style="item.nameStyle"  ref="nameStyle" >{{item.moduleTitle}}</div>
                            <!--内容-->
                            <div  :style="item.epitaphStyle"  ref="epitaphStyle">{{item.content}}</div>
                            <!--图片素材-->
                            <v-edittext :textflag="item.templateModuleContent"></v-edittext>
                            <img  :src="imgurl+item1.picSourcePath" v-for="(item1,index) in item.templateModulePicDTO" ref="picstyle" :style="item1.picStyle">
                            <img  :src="imgurl+item1.videoPicSourcePath" v-for="(item1,index) in item.templateModuleVideoDTO" ref="spstyle" :style="item1.videoStyle">
                        </div>
                        <!--照片-->
                        <div :style="item.headerStyle" v-if="item.type==3">
                            <!--标题-->
                            <div :style="item.nameStyle">
                                <!--图标-->
                                <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                <!--标题-->
                                <div :style="item.moduleTitleStyle" >{{item.moduleTitle}}</div>
                            </div>
                            <!--内容-->
                            <div :style="item.moduleSwiperStyle" class="photoDivCon">
                                <div >					
                                    <swiper :options="swiperOption" ref="mySwiper" :attr="index">
                                        <!-- 幻灯内容 -->
                                        <swiper-slide v-for="(item,index) in (item.photos) " @click="deldom($event,imagearr,index)">
                                            <div  class="imgshow"><img :src="imgurl+item.albumPath" :style="item.imageStyle" /></div>								
                                        </swiper-slide>
                                    </swiper>
                                </div>
                            </div>
                        </div>
                        <!--人生旅途-->
                        <div :style="item.headerStyle" v-if="item.type==4">
                                <!--标题-->
                            <div :style="item.nameStyle">
                                <!--图标-->
                                <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                <!--标题-->
                                <div :style="item.moduleTitleStyle">{{item.moduleTitle}}</div>
                            </div>
                            <!--内容-->
                            <div>
                                <!--时间轴-->
                                <div :style="item.moduleSwiperStyle">
                                    <swiper :options="rsOption">
                                        <!-- 幻灯内容 -->
                                        <swiper-slide v-for="(items,index) in reltdata">
                                            <div :style="item.moduleSwiperDivStyle">
                                                <p :style="item.moduleSwiperPStyle" class="tripConTime">{{items.startTime.substring(0,4)+'-'+items.endTime.substring(0,4)}}</p>
                                                <div :style="item.moduleSwiperDiv2Style"></div>
                                                <div v-if="iconcheckflag==index" class="tripConDot tripConDot1" @click.stop="rsltcheckFn(index)" :style="item.moduleSwiperIconStyle"><img :src="imgurl+item.moduleSwiperIcon0Path" /></div>
                                                <div v-else class="tripConDot tripConDot2" @click.stop="rsltcheckFn(index)" :style="item.moduleSwiperIconStyle"><img :src="imgurl+item.moduleSwiperIcon1Path" /></div>
                                            </div>
                                        </swiper-slide>
                                    </swiper>
                                </div>
                                <!--内容-->
                                
                                <div :style="item.moduleContentStyle">{{item.lifes==""?"":Singlere.eventContent}}</div>
                                <!--图片-->
                                <div :style="item.moduleImageDivStyle" class="displayflex overflow">
                                    <img :src="item.lifes==''?'':Singlere.eventPicCutBig?imgurl+Singlere.eventPicCutBig:staticimg+'/images/blank4.png'" :style="item.lifes==''?'':Singlere.imageStyle"/>
                                </div>
                            </div>
                        </div>	
                        <!--作品集-->
                        <div :style="item.headerStyle" v-if="item.type==6">
                            <!--标题-->
                            <div :style="item.nameStyle">
                                <!--图标-->
                                <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                <!--标题-->
                                <div :style="item.moduleTitleStyle">{{item.moduleTitle}}</div>
                            </div>
                            <!--内容-->
                            <div :style="item.moduleSwiperPStyle" class="workCon">
                                <swiper :options="zpOption">
                                    <!-- 幻灯内容 -->
                                    <swiper-slide v-for="(items,index) in (item.works)">
                                        <div :style="item.moduleSwiperDivStyle">
                                            <div :style="item.moduleImageDivStyle"><img :src="imgurl+items.pictureCoverPath" :style="items.imageStyle"/></div>
                                            <p :style="item.moduleSwiperPStyle">
                                                {{items.worksName}}
                                            </p>
                                        </div>
                                    </swiper-slide>
                                </swiper>
                            </div>
                        </div>	
                        <!--视频-->
                        <div :style="item.headerStyle" v-if="item.type==5">
                            <!--标题-->
                            <div :style="item.nameStyle">
                                <!--图标-->
                                <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                <!--标题-->
                                <div :style="item.moduleTitleStyle">{{item.moduleTitle}}</div>
                            </div>
                            <!--内容-->
                            <div :style="item.moduleSwiperStyle" >
                                <swiper :options="spOption">
                                    <!-- 幻灯内容 -->
                                    <swiper-slide v-for="(items,index) in (item.videos)"  class="videoCon">												
                                            <div :style="item.moduleImageDivStyle" class="videoConImg">
                                                <img :src="items.videoPicPath ?  (items.videoCoverStatus == 1 ? videoImg + items.videoPicPath : imgurl + items.videoPicPath)  : staticimg+'/images/blank3.png'" :style="item.moduleImageStyle"/>
                                                <div class="icon"></div>
                                            </div>
                                            <video :src="global+items.videoPath" v-show="false"></video>
                                            <p :style="item.moduleSwiperPStyle" class="videoConTitle">
                                                {{items.videoName}}
                                            </p>                                       												
                                    </swiper-slide>
                                </swiper>
                            </div>
                        </div>					
                    </div>
                </div>
            </div>
            <!-- close 关闭 -->
            <div class="close" @click="closePreviewFn"></div>
            <!-- 音乐播放 -->
            <div :class="musicBtn" ref="audiobox" @click="musicPlay()" v-show="musicPathPre != null"><audio id="audio" :src="musicurl+musicPathPre" ref="audio" loop autoplay preload></audio></div>
            <!-- 滚动提示 -->
            <div class="popup" v-show="popupFlg" @click="popupFlg=false"><img src="../images/screenmouse@2x.png" />鼠标滚动浏览</div>
        </div>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import global from '../config/global';
import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
		data() {
			return {
                staticimg:global.staticimg,
                imgurl:global.imgurl,
                videourl:global.videourl,
                videoImg:global.videoImg,
				// musicurl:global.musicurl,
                pageindexId:[],
				swiperOption:{
                    slidesPerView:3,
                    slidesPerColumn: 1,
                    notNextTick: true
                },
                rsOption:{//人生旅轮播修改
					slidesPerView:2,				
					debugger: false,											
				},
                zpOption:{
                    slidesPerView:3,
                   slidesPerColumn: 3,
                   slidesPerColumnFill : 'row',
                   debugger: false,
                   onTransitionStart(swiper){
                   }
                },
                spOption:{
                   slidesPerView:1,
                   slidesPerColumn: 2,
                   slidesPerColumnFill : 'column',
                   debugger: false,
                   onTransitionStart(swiper){
                   }
                },
                popupFlg:false,
                musicBtn:"musicBtn musicBtnPlay",
                // ismusicPlay:true,
			}
		},
        watch:{
            "ismusicPlay":function(){
                this.ismusicPlay ? this.musicBtn = 'musicBtn musicBtnPlay' : this.musicBtn ='musicBtn';	
            }
        },
        computed: mapState({ user: state => state.user }),
        props:["headerstyle","birthdayTime","dscheckactive","checkdsx","doubleCemeteryList","cemeteryId","musicPathPre","Singlere","iconcheckflag","reltdata","musicPathStatus","musicurl","ismusicPlay","phoneShow"],
		methods:{
            scrollBarWheel(value){
                this.popupFlg = false;                    
            },
            musicPlay(){
				if(this.ismusicPlay){
					this.$refs.audio.pause();
				}else{
					this.$refs.audio.play();
                }
                this.$emit("ismusicPlayFn",!this.ismusicPlay)
				this.ismusicPlay ? this.musicBtn = 'musicBtn musicBtnPlay' : this.musicBtn ='musicBtn';				
            },
            rsltcheckFn(index){
                this.$emit("rsltcheckFn",index)
            },
			closePreviewFn(){
                this.musicPlay();
                this.$emit("previewFN",false);
            },
            scrollTopFn(){
                this.$refs['middlePhoneRef'].scrollTop = 0;
            },
            slideFN(){
                var _this=this;
                this.swiperOption={
                    slidesPerView:3,
                    slidesPerColumn: 1,
                    notNextTick: true,
                    onTransitionStart(swiper){
                        if(swiper.isEnd){
                            var page="";
                            for(var i=0;i<_this.pageindexId.length;i++){
                                if(_this.headerstyle[swiper.container[0].getAttribute("attr")].moduleId==_this.pageindexId[i].mkid){
                                    _this.pageindexId[i].page++
                                    page=_this.pageindexId[i].page
                                }
                            }
                            _this.$http.get(global.host+"/unsecured/mobile/ablum/query?cemeteryId="+_this.cemeteryId+"&moduleId="+_this.headerstyle[swiper.container[0].getAttribute("attr")].moduleId+"&startPage="+page+"&pageSize=20")
                            .then((response) => {
                               //_this.headerstyle[swiper.container[0].getAttribute("attr")].photos.push.apply(_this.headerstyle[swiper.container[0].getAttribute("attr")].photos,response.body.result);
                               _this.$emit("photoFN",swiper.container[0].getAttribute("attr"),response.body.result)
                            })
                            .catch(function (response) {

                            })
                        }
                    },
                }
            }
        },
        components: {
			swiper, swiperSlide,
        },
        created(){
            //this.headerstyle();
            if(this.musicPathStatus == "0"){
                this.musicurl = global.imgurl;
            }else{
                this.musicurl=global.musicurl;
            }
            this.slideFN();
            this.popupFlg = true;
        },
    }
</script>